<template>
	<div class="tab-nav">
		<div
      v-for="(item, index) in list"
      :key="index"
      :class="{ 'tab-active': item.isActive }"
      class="tab-title"
      @click="changeActive(index)"
    >
    {{ item.name }}
    </div>
		
	</div>
</template>

<script>
export default {
  props: ["list"],
  methods: {
    changeActive(index) {
      //  changeActiveEvent 自定义事件
      this.$emit("changeActiveEvent", index);
    },
  }
};
</script>

<style>

.tab-nav .tab-title {
	cursor: pointer;
	padding: 0 15px;
	color: #033887;
	font-size: 22px;
	border-bottom: 2px solid transparent;
}

.tab-nav .tab-active {
	border-bottom: 2px solid #033887;
}
</style>
